import { useState, useRef } from 'react'
import ReactDOM from 'react-dom'

// 没有 hooks 的函数组件：
const Counter = ({ count, aRef }) => {
  // console.log(count)
  const showCount = () => {
    setTimeout(() => {
      console.log('展示 count 值：', count)
      console.log(aRef.current)
    }, 3000)
  }

  return (
    <div>
      <button onClick={showCount}>点击按钮3秒后显示count</button>
    </div>
  )
}

const App = () => {
  const [count, setCount] = useState(0)
  const aRef = useRef(null)
  console.log(count)
  return (
    <div>
      <h1>计数器：{count}</h1>
      <button
        onClick={() => {
          setCount((count) => {
            aRef.current = count + 1
            return count + 1
          })
        }}
      >
        +1
      </button>
      <hr />
      {/* 子组件 */}
      <Counter aRef={aRef} count={count} />
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))
